<style>
.app_outer{width: 100%;height: 100%;position: relative;background: #fff;border-radius: 8px;}
.badge-row{text-align: center;}
.badge-img{width: 100px;height: 100px;object-fit: contain;margin-right: 10px;border-radius: 50%;background: #ddd;}

.el-tabs--top{flex-direction: column-reverse !important;}
</style>
<template>
  <div class="app_outer">
    <el-descriptions title="基本信息" :column="4" border>
      <template v-for="row in config">
        <el-descriptions-item v-if="row.type!='hidden'" :rowspan="row.name=='head_img'?2:1" :label="row.label" >
          <component :is="row.type" name="" :value="row.value" v-bind="bind_param(row)" :is_info="true"></component>
        </el-descriptions-item>
      </template>
      <el-descriptions-item :span="4" label="获得的勋章">
        <div class="flex" v-if="config.badge_list" style="flex-wrap: wrap;">
          <div class="badge-row" v-for="badge in config.badge_list.value">
            <img class="badge-img" :src="badge.head_img">
            <p>{{badge.title}}</p>
          </div>
        </div>
      </el-descriptions-item>

    </el-descriptions>

    <el-tabs v-model="tabs">
      <el-tab-pane label="积分变更记录" name="log_score">
        <list_url ref="list_url" :config="list_url_config" style="flex-shrink: 1;"></list_url>
      </el-tab-pane>
      <el-tab-pane label="勋章获取记录" name="log_badge">
        <list v-if="config.badge_list" :cols="log_badge_cols" :data="config.badge_list.value"></list>
      </el-tab-pane>
    </el-tabs>

  </div>


</template>

<script>

export default {
  props: ['__iframe'],
  data(){
    let id = this.$get('id'), btns = undefined;
    let model = {name:this.$get('model_name')};
    let action = this.$get('action',id>0?'edit':'add');
    let controller = this.camel_str(model.name);
    return {
      id: id,
      btns: btns,
      config: {},
      model: model,
      action: action,
      action_map: {},

      tabs: 'log_score',
      list_url_config: {
        api: '/admin/log_score/list?where[user_id][eq]='+id,
        title: "",
        btns: [],
        forms_config: {},
        list_cols: {
          create_time: {name:'create_time', label:'时间', width:'165px'},
          title: {name:'title', label:'标题', min_width:'120px'},
          info: {name:'info', label:'详情', min_width:'120px'},
          score: {name:'score', label:'积分', width:'80px'},
          type: {name:'type', label:'类型', width:'80px', type:'select_one',config:'完成任务|system,管理员发放|admin,签到|sign,兑换消耗|exchange'},
        },
        resdata: function(list){
          return list;
        },
        limit: 20,
        p: this.$get('p', 1),
      },
      log_badge_cols: {
        create_time: {name:'create_time', label:'时间', width:'165px'},
        head_img: {name:'head_img', label:'勋章图片', width:'65px', type:'file_img'},
        title: {name:'title', label:'勋章名称', min_width:'120px'},
        get_type: {name:'get_type', label:'获取途径', width:'80px', type:'select_one',config:'完成任务|system,管理员发放|admin'},
      },
    }
  },
  methods: {
    url(init){
      let param = {};
      if (init) param._is_init_ = 7;
      if (this.id) param.id = this.id;
      let param_str = s94Mjs.param_encode(param);
      return `/admin/${this.model.name}/${this.action}?${param_str}`
    },
    param(data){
      data = data || {};
      data.model_name = this.model.name;
      return s94Mjs.param_encode(data);
    },
    onsubmit(formData){
      ajax({url:this.url(), method:'POST', data:formData}, (res)=>{
        if (this.__iframe){
          iframe.exe('index?'+this.param(), '$refs.list_url.list');
          iframe.hide('edit?'+this.param());
          if (!this.id) this.$refs['forms'].init();
        }else {
          this.$router.push('index?'+this.param());
        }
      }, (res)=>{
        if (res.errors) this.$refs['forms'].errors = res.errors;
      })
    },
    change_after_init(){
      let param = {};
      this.change_need_init.forEach((k)=>{
        param[k] = this.config[k].value;
      })
      this.init(param);
    },
    init(param){
      let is_first = !param;
      let is_info = this.$get('is_info');
      ajax({url:this.url(true), data:param}, (res)=>{
        if (is_first){
          this.model = res.model;
          this.action_map = res.action_map;
          if (is_info) this.btns = [];
        }
        Object.keys(this.config).forEach((k)=>{ this.config[k].remove = true; })
        res.data.forEach((v)=>{
          v.is_info = v.can_edit!=1 || is_info;
          v.remove = false;
          let old = this.config[v.name] || {};
          this.config[v.name] = Object.assign(old, v);
          // form_config[v.name].inline = false;
        })
        if (is_first){
          this.change_need_init.forEach((k)=>{
            this.config[k].onchange = this.change_after_init;
          })
        }
        return false;
      })
    },
  },
  computed: {
    change_need_init(){
      let res = [];
      let this_action = this.action_map[this.action];
      if (!this_action) return res;
      res = this_action.init_need_param ? s94Mjs.to_string(this_action.init_need_param).split(",") : [];
      return res;
    }
  },
  mounted() {
    let app = this;
    if (!this.__iframe) window['app'] = this;
    if (!app.model.name){
      return this.__iframe ? iframe.hide('edit') : this.$router.back();
    }
    //其他初始化操作
    this.init();
  }
}
</script>
